<template>
    <!--编写Ant Design组件，组件需要在官方文件查找修改使用-->
    <a-row :gutter="[16,24]">
      <a-col :span="6">
        <a-form-item label="省:">
          <a-select placeholder="请选择省" v-model="queryParam.province" >
            <a-select-option v-for="province in provinceList" :value="province.name" :key="province.name"
                             @click="cityInit(province.code)">
              {{province.name}}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="6">
        <a-form-item label="市:">
          <a-select placeholder="请选择市" v-model="queryParam.city" >
            <a-select-option v-for="city in cityList" :value="city.name" :key="city.name" @click="areaInit(city.code)">
              {{city.name}}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="6">
        <a-form-item label="区/县:">
          <a-select placeholder="请选择区县" v-model="queryParam.area">
            <a-select-option v-for="area in areaList" :value="area.name" :key="area.name"
                             @click="countryInit(area.code)">
              {{area.name}}
            </a-select-option>
          </a-select>
        </a-form-item>

      </a-col>

      <a-col :span="6">
        <a-form-item label="乡镇/街道:">
          <a-select placeholder="请选择乡镇街道" v-model="queryParam.country" >
            <a-select-option v-for="country in countryList" :value="country.name" :key="country.name">
              {{country.name}}
            </a-select-option>
          </a-select>
        </a-form-item>

      </a-col>
    </a-row>
</template>

<script>
  import {getAction} from '@/api/manage';
  import AFormItem from "ant-design-vue/es/form/FormItem";
  //定义引入的js插件
  export default {
    name: 'Area',
    components: {AFormItem},
    props: {
      queryParam: {
        type: Object,//父组件传入的属性数据类型
        require: true//当前属性是否允许为空
      },
    },
    data() {
      return {
        //定义组件中关联属性
        rootUrl: '/njt-area/listRoot',//根节点请求路径
        childrenUrl: '/njt-area/listChildren',//子节点加载路径
        //存储所有省
        provinceList: [],
        //存储指定省的所有市列表
        cityList: [],
        //存储指定市的所有区列表
        areaList: [],
        //存储指定区的所有街道列表
        countryList: [],
      }
    },
    methods: {
      //定义组件事件关联方法
      initRootList() {
        getAction(this.rootUrl).then(res => {
          if (res.success) {
            this.provinceList = res.result
          }
        })
      },
      cityInit(value) {
        getAction(this.childrenUrl, {parentCode: value}).then(res => {
          if (res.success) {
            this.cityList = res.result
          }
        })
      },
      areaInit(value) {
        getAction(this.childrenUrl, {parentCode: value}).then(res => {
          if (res.success) {
            this.areaList = res.result
          }
        })
      },
      countryInit(value) {
        getAction(this.childrenUrl, {parentCode: value}).then(res => {
          if (res.success) {
            this.countryList = res.result
          }
        })
      },
    },
    created() {//页面加载前执行的操作
      this.initRootList();
    },
  }
</script>